<template id="member_right">
    <div>
        <div class="member_right_shop_detail">
            <img src="../image/blue_da.png" alt="" @click="get_f()">
            <h4>会员权益</h4>
        </div>
        <div class="member_right_top">
            <img v-bind:src="user.img ? user.img : img" alt="">
            <img v-if="user.is_member" src="../image/wangx.jpg" alt="">
            <span>{{user.user_name}}</span>
            <span v-if="user.is_member" >会员</span>
            <span v-else="user.is_member" >普通用户</span>
        </div>
           <div class="member_right_fan">
               <p>{{privilege.cname}}</p>
               <p>每单享受返利{{privilege.scale}}%</p>
           </div>
        <div class="member_right_list">
             <div class="member_center">
                 <div class="member_center_1" v-for="(item,index) in items" @click="level_click(item.id,item.coupon_price)" v-bind:class="item.id== level_id ? 'style_k':'' ">
                     <span>{{item.title}}</span>
                     <span>{{item.tips}}</span>
                    <span>{{item.period}}个月会员<time v-if="item.bonus">+送({{item.bonus}})</time></span>
                     <span>特惠价¥{{item.coupon_price}}</span>
                     <span>原价¥{{item.price}}</span>
                 </div>
                 <div class="member_y">{{privilege.cname}}说明<img src="../image/wen.png" alt=""></div>
             </div>
        </div>
        <p class="member_p">需支付:<time>{{price}}</time>元</p>
<!--         <div class="member_wx">
        微信支付
    <img src="../image/wx.jpg" alt="">
    <span @click="click_pay(1)"></span>
</div>
<div class="member_wx">
    支付宝支付
    <img src="../image/zifu.jpg" alt="">
    <span @click="click_pay(2)"></span>
</div> -->
        <div class="member_foot">
            <span @click="member_But()">续费会员卡,继续享受会员5%返现</span>
        </div>
    </div>
</template>
<script>
    export default{
        name: 'member_right',
        data(){
            return{
                img:require("../image/ma.jpg"),
                user:[],
                items:[],
                privilege:[],
                level_id:0,
                price:0,
                pay_mode:'',
            }
        },
        mounted:function(){
             //获取会员描述信息
             let ary1  = [];
             ary1['c'] = 'Member';
             ary1['m'] = 'privilege';
             this.get_member_api(ary1);


             //获取会员周期信息
             let ary2  = [];
             ary2['c'] = 'Member';
             ary2['m'] = 'users_level_list';
             this.get_member_api(ary2);

            

        },
        methods:{
            get_member_api(data){
                let url  = this.GLOBAL.BaseUrl+'/mobile/api/index.php';
                let Data = this.GLOBAL.dataParam(data);

                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        if(data['m'] == 'privilege'){
                            this.privilege = temp.data;
                        }

                        if(data['m'] == 'users_level_list'){
                            this.user = temp.data.user;
                            this.items = temp.data.items;
                        }

                        if(data['m'] == 'member_user_order'){
                            window.location.href= "/php/v1/wxPay.php?order_id="+temp.data; 
                        }
                        //console.log(temp.data);
                    }else{
                        this.GLOBAL.center_error(this,temp);        
                    }  
                })     
            },
            level_click(id,price){
                this.level_id = id;
                this.price    = price;console.log(this.price);
            },
            click_pay(mode){
                this.pay_mode = mode;
            },
            member_But(){
                //提交开通会员
                
                let data  = [];
                data['c'] = 'Member';
                data['m'] = 'member_user_order';

                if(!this.level_id){
                    alert('请选择会员周期!');return false;
                }

                data['level_id'] = this.level_id;
                data['pay_id']   = this.pay_mode;
                
                this.get_member_api(data);

            },
            get_f:function(){
                window.history.go(-1);
            }
        }
    };
</script>
<style>
    .style_k{
        background:#ddf2ff;
        border-color: #007aff;
    }
    /*会员选中的状态*/
    .member_right_shop_detail{
        height:0.75rem;
        width:100%;
         border-bottom:1px solid #f0f0f0;
        position:relative;
        background:#ffffff;
    }
    .member_right_shop_detail img{
        height:0.36rem;
        width:0.36rem;
        display:block;
        position:absolute;
        left:0.25rem;
        top:0.2rem;
    }
    .member_right_shop_detail h4{
        height:0.75rem;
        color:#2eaffc;
        font-size:0.28rem;
        line-height:0.75rem;
        text-align:center;
        font-weight:normal;
    }
    /*头部*/
    .member_foot span{
        width:5.9rem;
        height:0.8rem;
        line-height:0.8rem;
        text-align:center;
        display:block;
        font-size:0.3rem;
        color:#ffffff;
        background: -webkit-linear-gradient(bottom, #87cef9 , #13a5fe); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(bottom, #87cef9, #13a5fe); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(bottom,  #87cef9, #13a5fe); /* Firefox 3.6 - 15 */
        background: linear-gradient(to bottom, #87cef9, #13a5fe); /* 标准的语法（必须放在最后） */
        margin:0.19rem 0.26rem 0 0.26rem;
        border-radius:0.1rem;
    }
    .member_foot{
        width:100%;
        height:1.16rem;
        border-top:0.1rem solid #f5f4f2;
    }
    /*会员底部*/
    .member_wx img{
        display:block;
        width:0.57rem;
        height:0.38rem;
        position:absolute;
        top:0.2rem;
        left:0;
    }
    .member_wx span{
        display:block;
        height:0.26rem;
        width:0.26rem;
        border-radius:50%;
        border:0.01rem solid #f0f0f0;
        position:absolute;
        right:0;
        top:0.24rem;
    }
    .member_wx{
        width:6.06rem;
        height:0.8rem;
        border-top:0.01rem solid #f0f0f0;
        text-indent: 0.64rem;
        line-height:0.8rem;
        color:#3f3f3f;
        font-size:0.26rem;
        position:relative;
        margin:0 auto;
    }
    .member_p{
        width:6.06rem;
        margin:0 auto;
        line-height:0.68rem;
        height:0.68rem;
        font-size:0.3rem;
        color:#000000;
    }
    .member_y{
        height:0.23rem;
        width:2rem;
        line-height:0.23rem;
        text-align:center;
        color:#dedede;
        font-size:0.24rem;
        float:right;
        padding-top:0.19rem;
        position:relative;

    }
    .member_y img{
        display:block;
        height:0.3rem;
        width:0.3rem;
        position:absolute;
        right:0;
        top:0.15rem;

    }
   #mm{
        margin-bottom:0;
    }
    .member_center_1 span:nth-of-type(5){
        display:block;
        position:absolute;
        height:0.42rem;
        line-height:0.42rem;
        top:0.63rem;
        color:#b9b9b9;
        text-decoration:line-through;
        right:0.38rem;
        font-size:0.24rem;
    }
    .member_center_1 span:nth-of-type(4){
           height:0.46rem;
        line-height:0.46rem;
        color:#fd5fbd;
        position:absolute;
        top:0.16rem;
        right:0.38rem;
        font-size:0.28rem;
    }
    .member_center_1 span:nth-of-type(3){
        height:0.42rem;
        width:auto;
        line-height:0.42rem;
        color:#353535;
        font-size:0.24rem;
        text-indent:0.22rem;
        display:block;
        position:absolute;
        top:0.63rem;
        left:0;
       /* float:left;*/
    }
    .member_center_1 span:nth-of-type(1){
        display:block;
        height:0.46rem;
        width:auto;
        line-height:0.46rem;
        font-size:0.22rem;
        color:#000000;
        text-indent:0.22rem;
        float:left;
        margin-right:0.05rem;
    }
    .member_center_1 span:nth-of-type(2){
        height:0.26rem;
        width:auto;
        font-size:0.18rem;
        /*line-height:0.26rem;*/
        color:#ffffff;
        background:#fc1dac;
        margin-top:0.07rem;
       /* position:absolute;
        top:0.2rem;
        left:1.36rem;*/
        border-radius:0.05rem;
        float:left;
    }
    .member_center_1{
        width:6.04rem;
        border:0.01rem solid #f0f0f0;
        height:1.04rem;
        padding-top:0.16rem;
        border-radius:0.05rem;
        margin-bottom:0.38rem;
        position:relative;
    }
    .member_center{
        width:6.06rem;
        min-height:4.84rem;
        margin:0 auto;
    }
    .member_right_list{
        width:100%;
        min-height:4.84rem;
    }
    /*list*/
    .member_right_fan p:nth-of-type(1){
        height:0.88rem;
        width:1.54rem;
        line-height:0.88rem;
        text-align:center;
        font-size:0.26rem;
        color:#000000;
        float:left;
    }
    .member_right_fan p:nth-of-type(2){
        height:0.88rem;
        line-height:0.88rem;
       /* text-align:center;*/
        font-size:0.24rem;
        color:#969696;
        float:left;
    }
    .member_right_fan{
        height:0.88rem;
        width:100%;
    }
    /*优惠返利*/
    .member_right_top span:nth-of-type(1){
        display:block;
        height:0.48rem;
        color:#000000;
        font-size:0.22rem;
       /* margin:0.5rem 0 0 1.3rem;*/
        position:absolute;
        top:0.5rem;
        left:1.4rem;
        line-height:0.48rem;
    }
    .member_right_top span:nth-of-type(2){
        height:0.36rem;
        width:0.94rem;
        display:block;
        position:absolute;
        color:#ffffff;
        background:#cacaca;
        border-radius:0.05rem;
        line-height:0.36rem;
        text-align:center;
        font-size:0.2rem;
        left:1.4rem;
        top:1.2rem;

    }
    .member_right_top img:nth-of-type(1){
        display:block;
        height:1.12rem;
        width:1.12rem;
        border-radius:50%;
        top:0.5rem;
        left:0.18rem;
        position:absolute;
    }
    .member_right_top img:nth-of-type(2){
        display:block;
        height:0.39rem;
        width:0.39rem;
        position:absolute;
        border-radius:50%;
        top:1.3rem;
        left:0.9rem;
    }
  .member_right_top{
        width:100%;
        height:2.14rem;
        background:url(../image/center_bac.png) no-repeat;
        background-size:cover;
        position:relative;
    }
</style>